<template>
	<gracePage headerBG="#FFFFFF" statusBarBG="#EB5D4B" :customHeader="false">
		
		<view slot="gBody" class="grace-body" style="padding-bottom: 100rpx;">
			<view style="height:38rpx;"></view>
			<!-- 购物车主结构  -->
			<view class="grace-list" style="background-color: #FFFFFF;margin-bottom: 20rpx;border-radius: 8rpx;">
				<view class="grace-list-items" @tap="goaddresslist" style="min-height: 128rpx;">
					<view class="grace-list-body" v-if="addressData.name">
						<view class="grace-list-title">
							<text class="grace-list-title-text">{{addressData.name}}</text>
							<text class="grace-list-title-desc">{{addressData.phone}}</text>
						</view>
						<view class="grace-list-body-desc">{{addressData.province}}{{addressData.city}}{{addressData.district}}{{addressData.address}}</view>
					</view>
					<view class="grace-list-body" v-if="!addressData.name">
						<view class="grace-list-title">
							<text class="grace-list-title-text" style="color: #999999;">请选择地址</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
			</view>
			<view class="grace-shoppingcard" v-for="(goods, index) in shoppingCard" :key="index">
				<view class="grace-shoppingcard-goods">
					<image :src="gRequest.apiUrlImages+goods.image" style="width: 180rpx;height: 180rpx;" class="grace-shoppingcard-goods-image" mode="scaleToFill"></image>
					<view class="grace-shoppingcard-goods-body">
						<view class="grace-shoppingcard-goods-title">{{ goods.name}}</view>
						<view class="grace-space-between">
							<text class="grace-shoppingcard-goods-price">￥{{ goods.price }}</text>
							<view class="grace-shoppingcard-goods-number">
								x{{goods.quantity}}
							</view>
						</view>
					</view>
				</view>
				<view style="height:25rpx;"></view>
			</view>
			<view class="paylist clearfix" style="background-color: #FFFFFF;border-radius: 8rpx;">
				<view class="grace-flex grace-rows grace-flex-vcenter" style="height: 90rpx;padding-left: 10rpx;" @tap="payChange('charge')">
				  <view class="iconfont icon-yue" style="color: #FD815F;font-size: 60rpx;"></view>
				  <view style="color: #666666;font-size: 28rpx;margin-left: 10rpx;">积分余额({{memberinfo.point}})</view>
				  <view class="iconfont icon-xuanzhong" v-if="payment_method=='charge'" style="color:#FD815F;margin-left: auto;font-size: 40rpx;margin-right: 20rpx;"></view>
				</view>
			</view>
			<!-- 优惠券弹出层 -->
			<view class="mask" catchtouchmove="preventTouchMove" v-if="couponshow == true" @tap="hidecoupon"></view>
			<view class="coupon" :style="'bottom:' + (couponshow == true ? '0':'')">
			  <view class="buyong" @click="notUsed()">不使用优惠券</view>
			  <scroll-view class="scrolls" scroll-y>
			   <coupon :couponList="couponList" @onReceive="onReceive"></coupon>
			  </scroll-view>
			</view>
		</view>
		<view slot="gBody" class="grace-nowrap grace-flex-vcenter grace-border-t" style="background-color:#FFFFFF;position: fixed;left: 0;bottom: 0;width: 100%;">
			<view class="grace-shoppingcard-count grace-nowrap grace-flex-vcenter" style="margin-left: 40rpx;">
				<text class="grace-text">总积分 :</text>
				<text style="font-size:32rpx; color:#F00;">{{ totalprice }}</text>
			</view>
			<view class="grace-shoppingcard-checkout" style="background:linear-gradient(268deg,rgba(235,93,75,1),rgba(253,129,95,1));color: #FFFFFF;" @tap="checkout">立即兑换</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
import graceCheckBtn from '../../graceUI/components/graceCheckBtn.vue';
import graceNumberBox from '../../graceUI/components/graceNumberBox.vue';
import graceHeader from '../../graceUI/components/graceHeader.vue';
import coupon from "./coupon";
export default {
	data() {
		return {
			colors:"#333333",
			couponshow: false,
			// 总价
			totalprice: 0,
			// 选择文本
			selectText: '全选',
			// 购物车数据 可以来自 api 请求或本地数据
			shoppingCard: [],
			addressData:{},
			payment_method:"charge",
			couponList: [ //优惠券列表
				{
					money: 30,
					reduce: 5,
					date: '2020-02-09 2020-10-02',
					id: 1,
					status: 0,
					condition: ['新人专享', '仅在支付时使用', '可与其他产品共享']
				}, {
					money: 30,
					reduce: 5,
					date: '2020-02-09 2020-10-02',
					id: 2,
					status: 0,
					condition: ['新人专享']
				}
			],
			couponData:{},
			memberinfo:{
				point:0
			}
		};
	},
	onLoad: function() {
		this.gRequest.get('/login/getmemberinfo', {
			member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id
		}, res => {
			this.setData({ memberinfo: res.data });
		});
	},
	
	onShow: function() {
		if (!uni.getStorageSync('userInfo')) {
			uni.navigateTo({
				url: '../login/login'
			});
		}
		uni.getStorage({
		    key: 'currentAddress',
		    success: (res)=>{
					if(res.data) {
						this.addressData = JSON.parse(res.data)
					}
		    }
		});
		uni.getStorage({
		    key: 'orderList',
		    success: (res)=>{
		      this.shoppingCard = JSON.parse(res.data)
					this.countTotoal();
		    }
		});
		this.getCurrentAddress()
	},
	methods: {
		checkout(){
			this.gRequest.post("/orders/createorder", {
				member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id,
				total: this.totalprice,
				'prolist': JSON.stringify(this.shoppingCard),
				'is_jifen_order': "1",
				'addr_id': this.addressData.address_id,
				'shipfee': "0",
				'paymethod': this.payment_method,
				'coupon': ""
			}, 'form', {}, res => {
				if (res.status == 1) {
					this.toPay(res.data.order_id)
				}
			});
		},
		toPay:function(order_id){
		    if(!this.addressData.address_id) {
		    	uni.showToast({
		    		title: '请选择地址',
		    		'icon': 'none'
		    	})
		    	return
		    }
			this.gRequest.post("/orders/tojifenpay", {
				order_id: order_id,
				member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id,
				total: this.totalprice,
				'prolist': JSON.stringify(this.shoppingCard),
				'is_jifen_order': "1",
				'addr_id': this.addressData.address_id,
				'shipfee': "0",
				'paymethod': this.payment_method,
				'coupon': ""
			}, 'form', {}, res => {
				if (res.status == 1) {
					uni.redirectTo({ url: '../myorders/myorders' });
				}
			});
		},
		payChange(type) {
		  this.payment_method = type;
		},
		getCurrentAddress:function(){
			this.gRequest.get('/orders/getaddressbymemberid', {
				member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id
			}, res => {
				if(res.data.length>0) {
					this.setData({ addressData: res.data[0] });
				}
			});
		},
		goaddresslist: function() {
			uni.navigateTo({
				url: '../my/addressList?type=1'
			});
		},
		//计算总计函数
		countTotoal: function() {
			var total = 0;
			for (var i = 0; i < this.shoppingCard.length; i++) {
				if (this.shoppingCard[i].checked) {
					total += Number(this.shoppingCard[i].price) * Number(this.shoppingCard[i].quantity);
				}
			}
			this.totalprice = total;
		},
		goback: function() {
			uni.navigateBack({});
		}
	},
	components: {
		gracePage,
		coupon
	}
};
</script>
<style>
page {
	background: #f8f8f8;
}
.empty-view {
	width: 280rpx;
	height: 280rpx;
	border-radius: 280rpx;
	background-color: #f6f7f8;
	margin-top: 30rpx;
}
.empty-img {
	width: 220rpx;
	height: 200rpx;
	margin: 40rpx;
	border-radius: 200rpx;
}
.grace-shoppingcard {
	background: #ffffff;
	border-radius: 8rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}
.grace-shopp-name {
	width: 500rpx;
}
.grace-shopp-go {
	width: 120rpx;
}
.grace-shoppingcard-goods {
	margin: 10rpx 0;
	display: flex;
	flex-wrap: nowrap;
}
.grace-shoppingcard-goods-checkbtn {
	width: 60rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-goods-image {
	width: 120rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-goods-body {
	width: 100%;
}
.grace-shoppingcard-goods-title {
	line-height: 1.4em;
}
.grace-shoppingcard-goods-price {
	color: #f00;
	font-size: 32rpx;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.grace-shoppingcard-goods-number {
	padding: 2px 0;
}
.grace-shoppingcard-remove {
	display: block;
	text-align: right;
	line-height: 50rpx;
	margin-top: 30rpx;
	color: #cccccc;
	font-size: 24rpx;
}
.grace-shoppingcard-checkbtn {
	width: 200rpx;
	margin-left: 50rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-count {
	width: 600rpx;
}
.grace-shoppingcard-checkout {
	width: 280rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 28rpx;
	text-align: center;
	flex-shrink: 0;
}
.cart .grace-page-footer {
	position: relative;
}

/* 优惠券 */
.coupon{
  background-color: #fff;
  border-radius: 10upx 10upx 0 0;
  position: fixed;
  left: 0;
  bottom: -1000upx;
  z-index: 150;
  transition: all 0.3s;
}
.coupon .buyong{
  line-height: 80upx;
  padding: 0 4%;
  text-align: right;
  color: #999;
}
.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 10;
  opacity: 0.7;
}
.scrolls{
  width: 100vw;
  height: 55vh;
  z-index: 500;
}
.morelist{
  height: 80upx;
  line-height: 80upx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1upx dashed #eee;
	background-color: #FFFFFF;
	border-radius: 8rpx;
	padding: 0 20rpx;
	margin-bottom: 20rpx;
}
.morelist .title{
  color: #333;
  font-size: 26upx;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.morelist .title .quan{
  font-size: 20upx;
  width: 35upx;
  height: 35upx;
  line-height: 36upx;
  text-align: center;
  border-radius: 8upx;
  margin-right: 10upx;
  align-items: center;
  color: #fff;
}
.morelist .right_title{
  color: #999;
}
</style>
